<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>商品信息管理</title>
	<meta name="decorator" content="default"/>
	<script type="text/javascript">
		$(document).ready(function() {
			//$("#name").focus();
			$("#inputForm").validate({
				submitHandler: function(form){
					// loading('正在提交，请稍等...');
					$(".picUrls").each(function (i,j) {
						console.log(JSON.stringify($(this).attr("src")));
                    })
					// form.submit();
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
            // $('input[id=coverImgFile]').change(function() {
            //     var f = document.getElementById("coverImgFile").files;
            //     $('#beautyFile').val(f[0].name);
            // });
		});
	</script>
</head>
<body>
	<ul class="nav nav-tabs">
		<li><a href="${ctx}/goods/goodsInfo/">商品信息列表</a></li>
		<li class="active"><a href="${ctx}/goods/goodsInfo/form?id=${goodsInfo.id}">商品信息<shiro:hasPermission name="goods:goodsInfo:edit">${not empty goodsInfo.id?'修改':'添加'}</shiro:hasPermission><shiro:lacksPermission name="goods:goodsInfo:edit">查看</shiro:lacksPermission></a></li>
	</ul><br/>
	<form:form id="inputForm" modelAttribute="goodsInfo" action="${ctx}/goods/goodsInfo/save" method="post" class="form-horizontal" enctype="multipart/form-data">
		<form:hidden path="id"/>
		<sys:message content="${message}"/>
		<div class="control-group">
			<label class="control-label">商品SN：</label>
			<div class="controls">
				<form:input path="sn" htmlEscape="false" maxlength="128" class="input-xlarge " />
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">分类：</label>
			<div class="controls">
                <sys:treeselect id="categoryId" name="categoryId" value="${goodsInfo.categoryId}" labelName="categoryName" labelValue="${goodsInfo.categoryName}"
                                title="商品分类" url="/goods/goodsCategory/treeData"  cssClass="" allowClear="true"/>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">图片：</label>
			<%--<img style="width:80px;height:80px;margin-left:20px" src=${goodsInfo.cover} >--%>

			<c:forEach items="${goodsInfo.picList}" var="pic" varStatus="i">
				<h5>原图</h5>
				<img style="width:80px;height:80px;margin-left:20px" src=${pic} >
			</c:forEach>

			<c:if test="${empty goodsInfo.picList}">
			<div class="controls">
				<img id="picUrl" name="picUrl" class="picUrls"
					 src="<c:if test='${not empty goodsCategory.picUrl}'>${goodsCategory.picUrl}</c:if>
                   <c:if test='${empty goodsCategory.picUrl}'>https://photo.16pic.com/00/21/44/16pic_2144587_b.jpg</c:if>"
					 style="width: 64px; height: 64px" onClick="selectFile()" /> <input type="file" name="picFile" id="picFile"
																						onchange="previewHandle(this, 'picUrl')" style="filter: alpha(opacity = 0); opacity: 0; width: 0; height: 0;" />

				<img id="picUrl1" name="picUrl" class="picUrls"
					 src="<c:if test='${not empty goodsCategory.picUrl}'>${goodsCategory.picUrl}</c:if>
                   <c:if test='${empty goodsCategory.picUrl}'>https://photo.16pic.com/00/21/44/16pic_2144587_b.jpg</c:if>"
					 style="width: 64px; height: 64px" onClick="selectFile1()" /> <input type="file" name="picFile" id="picFile1"
																						 onchange="previewHandle(this, 'picUrl1')" style="filter: alpha(opacity = 0); opacity: 0; width: 0; height: 0;" />

				<img id="picUrl2" name="picUrl" class="picUrls"
					 src="<c:if test='${not empty goodsCategory.picUrl}'>${goodsCategory.picUrl}</c:if>
                   <c:if test='${empty goodsCategory.picUrl}'>https://photo.16pic.com/00/21/44/16pic_2144587_b.jpg</c:if>"
					 style="width: 64px; height: 64px" onClick="selectFile1()" /> <input type="file" name="picFile" id="picFile2"
																						 onchange="previewHandle(this, 'picUrl2')" style="filter: alpha(opacity = 0); opacity: 0; width: 0; height: 0;" />



				<img id="picUrl3" name="picUrl" class="picUrls"
					 src="<c:if test='${not empty goodsCategory.picUrl}'>${goodsCategory.picUrl}</c:if>
                   <c:if test='${empty goodsCategory.picUrl}'>https://photo.16pic.com/00/21/44/16pic_2144587_b.jpg</c:if>"
					 style="width: 64px; height: 64px" onClick="selectFile1()" /> <input type="file" name="picFile" id="picFile3"
																						 onchange="previewHandle(this, 'picUrl3')" style="filter: alpha(opacity = 0); opacity: 0; width: 0; height: 0;" />



				<img id="picUrl4" name="picUrl" class="picUrls"
					 src="<c:if test='${not empty goodsCategory.picUrl}'>${goodsCategory.picUrl}</c:if>
                   <c:if test='${empty goodsCategory.picUrl}'>https://photo.16pic.com/00/21/44/16pic_2144587_b.jpg</c:if>"
					 style="width: 64px; height: 64px" onClick="selectFile1()" /> <input type="file" name="picFile" id="picFile4"
																						 onchange="previewHandle(this, 'picUrl4')" style="filter: alpha(opacity = 0); opacity: 0; width: 0; height: 0;" />

			</c:if>
				<script type='text/javascript'>
                    function selectFile() {
                        $("#picFile").trigger("click");
                    }

                    function selectFile1() {
                        $("#picFile1").trigger("click");
                    }

                    function selectFile2() {
                        $("#picFile2").trigger("click");
                    }

                    function selectFile3() {
                        $("#picFile3").trigger("click");
                    }

                    function selectFile4() {
                        $("#picFile4").trigger("click");
                    }

                    function previewHandle(fileDOM, targetImg) {
                        var file = fileDOM.files[0], // 获取文件
                            imageType = /^image\//, reader = '';

                        // 文件是否为图片
                        if (!imageType.test(file.type)) {
                            alert("请选择图片！");
                            return;
                        }
                        // 判断是否支持FileReader
                        if (window.FileReader) {
                            reader = new FileReader();
                        }
                        // IE9及以下不支持FileReader
                        else {
                            alert("您的浏览器不支持图片预览功能，如需该功能请升级您的浏览器！");
                            return;
                        }

                        // 读取完成
                        reader.onload = function(event) {
                            // 获取图片DOM
                            var img = document.getElementById(targetImg);
                            // 图片路径设置为读取的图片
                            img.src = event.target.result;
                        };
                        reader.readAsDataURL(file);
                    }
				</script>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">供应商编号：</label>
			<div class="controls">
				<form:input path="supplierId" htmlEscape="false" maxlength="11" class="input-xlarge  digits" />
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">商品名称：</label>
			<div class="controls">
				<form:input path="name" htmlEscape="false" maxlength="128" class="input-xlarge required " />
				<span class="help-inline"><font color="red">*</font> </span>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">商品关键字：</label>
			<div class="controls">
				<form:input path="keywords" htmlEscape="false" maxlength="255" class="input-xlarge "/>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">销售量：</label>
			<div class="controls">
				<form:input path="salesVolume" htmlEscape="false" maxlength="11" class="input-xlarge  digits" />
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">零售价：</label>
			<div class="controls">
				<form:input path="retailPrice" htmlEscape="false" class="input-xlarge required" />
				<span class="help-inline"><font color="red">*最大利润的产品的零售价</font> </span>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">总库存：</label>
			<div class="controls">
				<form:input path="storeNumber" htmlEscape="false" maxlength="8" class="input-xlarge required" />
				<span class="help-inline"><font color="red">*各规格产品的库存总和</font> </span>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">单价：</label>
			<div class="controls">
				<form:input path="unitPrice" htmlEscape="false" class="input-xlarge required" />
				<span class="help-inline"><font color="red">*最大利润的产品的出厂价</font> </span>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">商品单位：</label>
			<div class="controls">
				<form:input path="unit" htmlEscape="false" maxlength="24" class="input-xlarge " />
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">利润：</label>
			<div class="controls">
				<form:input path="profit" htmlEscape="false" class="input-xlarge required" />
				<span class="help-inline"><font color="red">*取该商品下，各产品利润的最大值</font> </span>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">是否上架：</label>
			<div class="controls">
				<form:select path="onSaleFlag" class="input-medium ">
					<form:option value="" label=""/>
					<form:options items="${fns:getDictList('on_sale_flag')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
				</form:select>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">商品简介：</label>
			<div class="controls">
				<form:input path="shortDescription" htmlEscape="false" class="input-xlarge "/>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">供应商创建者编号：</label>
			<div class="controls">
				<form:input path="createSuId" htmlEscape="false" maxlength="11" class="input-xlarge  digits" />
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">供应商修改者编号：</label>
			<div class="controls">
				<form:input path="updateSuId" htmlEscape="false" maxlength="11" class="input-xlarge  digits" />
			</div>
		</div>
        <div class="control-group">
            <label class="control-label">审核状态：</label>
            <div class="controls">
                <form:select path="approveStatus" class="input-medium required">
                    <form:option value="" label=""/>
                    <form:options items="${fns:getDictList('approve_status')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
                </form:select>
                <span class="help-inline"><font color="red">*</font> </span>
            </div>
        </div>
        <c:if test="${not empty goodsInfo.description}">
        <div class="control-group">
            <label class="control-label">介绍详情图文：</label>
            <div class="controls">
                <form:textarea id="description" htmlEscape="true" path="description.content" rows="4" maxlength="4000" class="input-xxlarge" />
                <sys:ckeditor replace="description" uploadPath="goods/description" />
				<form:hidden path="description.id"/>
            </div>
        </div>
        </c:if>
		<div class="form-actions">
			<shiro:hasPermission name="goods:goodsInfo:edit"><input id="btnSubmit" class="btn btn-primary" type="submit" value="保 存"/>&nbsp;</shiro:hasPermission>
			<input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)"/>
		</div>
	</form:form>
</body>
</html>
